import { Avatar, Button, Comment, Form, Input, List, message } from 'antd';
import React ,{ useState } from 'react'
import moment from 'moment';
import {ViewArticles,CommentApi,AddCommentApi} from "../request/api"
import {useParams} from "react-router-dom"
import "../assets/index.less"
import Test from"./test"
import $ from  'jquery'
import index from './Index';
import ReactDOM from 'react-dom';
const { TextArea } = Input;
const item=[]
let testcomment=[]

export default function ViewArticle() {
  const [update, setUpdate] = useState(1)
    const params = useParams()
    
  const [submitting, setSubmitting] = useState(false);
        ViewArticles({
            articleId:params.id
        }).then(res=>{
            if(res.code===200){  
               function article(){
            const content=res.data.contentHtml 
               return (
                <div>
                <div dangerouslySetInnerHTML={{__html:content}} className="viewList1">
                
                    </div>
                    
                    </div>
                        )
            
                    }
            ReactDOM.render(article(),document.getElementById("articleView"))
                }
                    
           
        })
        function commentfun(params){
        CommentApi({
            bodyId:params.id
      }).then(res=>{
        if(res.code===200){
          testcomment=res.data
          function replyComment(){
            return 
            <input rows={2}/>
            
          }
          function commentList(){
                return (<div>
                        {testcomment.map((item,index=>{
                         return <ul key={index.toUid}>
                              {index.nickname}&emsp;{index.createDate}&emsp; &emsp;<a onClick={()=>{replyComment()}} key={index.id}>回复</a>
                              <p/>&emsp;&emsp;{index.content}
                              {index.reply.map((item=>{
                                return <li key={item.id}>
                                    <p/>&emsp;&emsp;{item.commentUser}&emsp;{item.createDate}&emsp;回复&emsp;@{item.toComment}&emsp;&emsp;<a>回复</a>
                                    <p/>&emsp;&emsp;&emsp;{item.content}
                                </li>
                              }))}
                         </ul> 
                        }))}
                  </div>)
              
          }

        ReactDOM.render(commentList(),document.getElementById("test"))
        
    }
    else{
      message.error("评论请求超时！")
    }
    
      })
    }
    //   const CommentList = ({ comments }) => (
    //     <List
    //       dataSource={comments}
    //       header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
    //       itemLayout="horizontal"
    //       renderItem={(props) => <Comment {...props} />}
    //     />
    //   );
    //   const handleSubmit = () => {
    //     if (!value) return;
    //     setSubmitting(true);
    //     setTimeout(() => {
    //       setSubmitting(false);
    //       setValue('');
    //       setComments([
    //         ...comments,
    //         {
    //           author: 'Han Solo',
    //           avatar: 'https://joeschmoe.io/api/v1/random',
    //           content: <p>{value}</p>,
    //           datetime: moment().fromNow(),
    //         },
    //       ]);
    //     }, 1000);
    //   };
    
    //   const handleChange = (e) => {
    //     setValue(e.target.value);
    //   };
    function commentSubmit(){
      var commentValue=document.getElementById('commentarea').value;
      
      
      
      const comments={
        parentId:0,
        articleId:params.id,
        content:commentValue,
        level:1
      }
      if(commentValue!==''){
      AddCommentApi(
        comments
        ).then(res=>{
        if(res.code===200){
          
          message.success("评论成功！")
          
          setUpdate(update+1);
          document.getElementById('commentarea').value="";
        }
        else{
          message.error("评论失败！")
        }
      })}
      else{
        message.error("请输入评论内容！")
      }
    }
    
    return (    
        <div>
        <div id='articleView'> 
        
        </div>
        <div className='comment'>
        <div>
   
       
        <Form>
        <Form.Item>
          <TextArea rows={2} id='commentarea' />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" loading={submitting} onClick={commentSubmit}  type="primary">
            评论一下
          </Button>
         
        </Form.Item>
        </Form>
      </div>
        <div id='test'>
        {commentfun(params)}
        </div>
        </div>
        </div>
    )

}
